<template>
  <div>
    <el-card shadow='false' class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="addBrand" type="primary">新增</el-button>
      </div>
      <div class="text item">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="品牌名称"
          ></el-table-column>
          <el-table-column align="center" prop="name" label="展示状态">
            <template slot-scope="scope">
              是否显示
              <el-switch
                v-model="scope.row.showStatus"
                active-color="#13ce66"
                inactive-color="#DCDFE6"
                :active-value="1"
                :inactive-value="0"
                @click.native="whichone(scope.row.id)"
                @change="showChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="LOGO">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.logo"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="专区大图">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.bigPic"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="brandStory" label="品牌故事">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column align="center" prop="sort" label="排序">
          </el-table-column>
          <el-table-column
            align="center"
            prop="productCommentCount"
            label="产品评论数量"
          >
          </el-table-column>
          <el-table-column align="center" prop="productCount" label="产品数量">
          </el-table-column>
          <el-table-column align="center" prop="" label="是否品牌制造商">
            <template slot-scope="scope">
              <el-tag :type="scope.row.factoryStatus != 0 ? '' : 'danger'">{{
                scope.row.factoryStatus == 0 ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="200"
            align="center"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="primary"
                >编辑</el-button
              >
              <el-button @click="del(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <pagination
        @limitfather="limitchange"
        @startfather="startchange"
        :totalNumber="totalNumber"
      ></pagination>
    </el-card>
    <addBrand @send-father="resive" ref="son"></addBrand>
  </div>
</template>

<script>
import brandApi from "@/api/goods/brand/index";
import addBrand from "@/components/goods/addBrand";
import pagination from "@/components/common/pagination";
export default {
  components: { addBrand, pagination },

  data() {
    return {
      tableData: [],
      start: 1,
      limit: 10,
      totalNumber: 0,
      choiceId: "",
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 来自子组件切换limit
    limitchange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 来自子组件切换start
    startchange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    // 编辑品牌
    edit(item) {
      this.$refs.son.change(item);
    },
    resive(e) {
      console.log(e);
      if (e) {
        this.init();
      }
    },
    // 新增品牌
    addBrand() {
      this.$refs.son.change1();
    },
    // 删除品牌
    del(item) {
      console.log(item);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        brandApi.delBrand(item.id).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    // 品牌的显示与隐藏
    whichone(id) {
      console.log(id);
      this.choiceId = id;
    },
    showChange(e) {
      console.log(e);
      var status = !e.showStatus;
      brandApi
        .switchShowStatus({
          id: this.choiceId,
          status: Number(e.showStatus),
        })
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.$message.success("切换成功");
          } else {
            this.$message.error(res.message);
            e.showStatus = status;
          }
        });
    },
    // 获取品牌列表
    init() {
      brandApi.findBrandByPage(this.start, this.limit).then((res) => {
        console.log(res);
        this.tableData = res.data.rows;
        this.totalNumber = res.data.total;
      });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
}
</style>